<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性
			 之后，那么，自组华南就能够，通过某些方式，来调用传递这个方法-->
			<com2 @func123="show"></com2>
			<h3>{{msg2}}</h3>
		</div>
		<template id="tmp1">
			<div>
				<p>这是子组件-------</p>
				<input type="button" @click="myclick" value="触发点击,调用父类的方法"/>
			</div>
		</template>
		<script>
			var com2 = {
				data(){
					return {
						msg:{name:'小偷儿子',age: 12}
					}
				},
				template: '#tmp1',
				methods:{
					myclick(){
						//因为func123定义用来调用的 字符串，所以要加‘’
						//$emit是触发、调用、发射的意思
						// this.$emit('func123',123456)
						this.$emit('func123', this.msg)
					}
				}
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					msg2: null
				},
				methods: {
					show(data){
						console.log("调用了父类的show()方法-----"+data)
						console.log(data)
						//z这样当点击按钮的时候，把子类的数据传递给父类中去
						this.msg2=data
					}
				},
				components: {
					// com2:com2
					com2
				}
			})
		</script>
	</body>
</html>
